<template>
  <transition name="slideUp" appear>
    <div class="login-wrapper">
      <div class="back" @click="routerback">
        <i class="iconfont iconchuyidong"></i>
      </div>

      <div class="login-box">
        <rotate3DCard trigger="custom" direction="row" :value="showBack">
          <template #cz>
            <div class="font-wrap">
              <div class="login-phone" @click.stop="loginPhone">
                <span>手机号登录</span>
              </div>
              <div class="login-off" @click.stop="routerback">
                <span>离线模式</span>
              </div>
              <div class="btntips" :class="{'shake animated':shake}" @click.stop>
                <van-checkbox v-model="checked" checked-color="rgba(255,255,255,.1">
                  <span>同意</span>
                  此app仅供个人学习参考，不可用作商业用途
                </van-checkbox>
              </div>
              <div class="login-group" @click="handleBottomClick">
                <div class="item">
                  <i class="iconfont iconweixin1"></i>
                </div>
                <div class="item">
                  <i class="iconfont iconqq"></i>
                </div>
                <div class="item">
                  <i class="iconfont iconweibo1"></i>
                </div>
                <div class="item-row">
                  <i class="iconfont iconpingguo"></i>
                  <p>通过AppleId登录</p>
                </div>
              </div>
            </div>
          </template>
          <template #cf>
            <div class="back-wrap">
              <div class="input-group w700">
                <!-- 输入手机号，调起手机号键盘 -->
                <h6 class="login_tit">手机登录</h6>
                <van-field v-model="tel" type="tel" label="手机号" left-icon="phone" clearable />
                <van-field
                  v-model="password"
                  :type="openPassType"
                  label="密码"
                  :left-icon="openPassCls"
                  clearable
                  @click-left-icon="handlePwaClick"
                />
                <van-field
                  v-model="nickname"
                  type="text"
                  label="昵称"
                  left-icon="smile-o"
                  clearable
                  v-show="usersms"
                />
                <van-field
                  v-model="sms"
                  center
                  clearable
                  label="短信验证码"
                  placeholder="请输入短信验证码"
                  left-icon="lock"
                  v-show="usersms"
                  @focus.prevent="handleshowKeyBoard"
                >
                  <template #button>
                    <van-button
                      size="small"
                      :type="disabled?'disabled':'primary'"
                      @click="handleSendsms"
                    >
                      <!-- 发送验证码 -->
                      {{smsText}}
                    </van-button>
                  </template>
                </van-field>
                <div class="login-phone-yzm" @click="toggleLoginWay">{{usersmsTextRev}}</div>
                <div class="login-phone-btn" @click="onSubmit">{{usersmsText}}</div>
                <div class="login-phone-rest">重置</div>
              </div>
            </div>
          </template>
        </rotate3DCard>
      </div>
      <van-number-keyboard
        v-model="sms"
        :show="showKeyBoard"
        title="请尽快输入短信验证码"
        extra-key="."
        close-button-text="完成"
        @blur="showKeyBoard = false"
      />
    </div>
  </transition>
</template>

<script>
import { Checkbox, CheckboxGroup, Button, Field, NumberKeyboard } from "vant";
import rotate3DCard from "@/base/rotate3dCard/rotate3dCard";
import { loginByPhone, sendSms, verifyPhoneCms, register } from "@/request/api";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      checked: false,
      shake: false,
      showBack: false,
      // 密码框明文输入：
      openPass: false,
      // 使用验证码登录：
      usersms: false,
      tel: "",
      password: "",
      // 注册昵称：
      nickname: "",
      // 验证码
      sms: "",
      // 验证码时间：
      computeTime: 0,
      // 验证码按钮是否可点击.默认可以点击：
      disabled: false,
      // 输入盘：
      showKeyBoard: false
    };
  },
  computed: {
    openPassCls() {
      return !this.openPass ? "closed-eye" : "eye-o";
    },
    openPassType() {
      return !this.openPass ? "password" : "number";
    },
    usersmsText() {
      return this.usersms ? "注册" : "登录";
    },
    usersmsTextRev() {
      return this.usersms ? "登录" : "注册";
    },
    smsText() {
      if (this.computeTime === 0) {
        return "发送验证码";
      } else {
        return this.computeTime + "s";
      }
    }
  },
  mounted() {},
  methods: {
    handleshowKeyBoard() {
      this.showKeyBoard = true;
    },
    handlePwaClick() {
      this.openPass = !this.openPass;
    },
    toggleLoginWay() {
      this.usersms = !this.usersms;
    },
    routerback() {
      if (!this.showBack) {
        this.$router.back();
      } else {
        this.showBack = false;
      }
    },
    handleBottomClick() {
      this.$toast("目前仅支持手机号码和邮箱登录");
    },
    loginPhone() {
      if (!this.checked) {
        this.$toast("请先勾选协议");
        this.shake = true;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.shake = false;
        }, 1000);
        return;
      }
      this.showBack = true;
    },
    fontback() {
      this.showBack = true;
    },
    onSubmit() {
      // 表单验证两者都需要先验证手机号是否合法：
      if (!this.verPhoneFiled()) {
        return false;
      }
      // 通过手机号和密码登录：
      if (!this.usersms) {
        if (this.password == "") {
          this.$toast("密码不能为空");
          return false;
        }
        // 验证通过：
        const toast = this.$toast.loading({
          message: "登录中...",
          forbidClick: false,
          duration: 0,
          loadingType: "spinner"
        });
        loginByPhone({
          phone: this.tel,
          password: this.password
        })
          .then(res => {
            if (res.code === 200) {
              toast.clear();
              this.$toast("登录成功");
              // 登录成功，保存cooke即可,保存登录状态到vuex和localstorage
              this.saveLoginInfo(res.profile);
              this.routerIndex();
            } else {
              toast.clear();
              this.$toast(res.message);
            }
          })
          .catch(res => {
            console.log(res);
          });
      }
      // 通过短信验证码注册
      if (this.usersms) {
        var reg = /^\d{4}$/;
        if (!this.sms) {
          this.$toast("请输入验证码");
          this.showKeyBoard = true;
          return false;
        } else if (!this.nickname) {
          this.$toast("请输入昵称");
          return false;
        } else if (!this.password) {
          this.$toast("密码不能为空");
          return false;
        } else if (!reg.test(this.sms)) {
          this.$toast("请输入四位验证码");
          this.showKeyBoard = true;
          return false;
        }
        const toast = this.$toast.loading({
          message: "登录中...",
          forbidClick: false,
          duration: 0,
          loadingType: "spinner"
        });
        // 验证成功，调用接口：
        verifyPhoneCms({
          phone: this.tel,
          captcha: this.sms
        })
          .then(res => {
            console.log(res);
            if (res.code === 200) {
              register({
                phone: this.tel,
                captcha: this.sms,
                password: this.password,
                nickname: this.nickname
              })
                .then(res => {
                  this.$toast("注册成功!");
                })
                .catch(res => {
                  console.log(res);
                });
            }
          })
          .catch(res => {
            console.log(res);
            toast.clear();
            this.$toast("验证码错误!");
          });
      }
    },
    // 验证手机号码表单:
    verPhoneFiled() {
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.tel == "") {
        this.$toast("手机号不能为空");
        return false;
      } else if (!reg.test(this.tel)) {
        this.$toast("手机号格式不正确");
        return false;
      }
      return true;
    },
    getCode() {
      if (!this.computeTime) {
        this.disabled = true;
        this.computeTime = 60;
        this.timer = setInterval(() => {
          this.computeTime--;
          if (this.computeTime <= 0) {
            this.disabled = false;
            clearInterval(this.timer);
          }
        }, 1000);
      }
    },
    // 点击发送验证码：
    handleSendsms() {
      if (this.disabled) {
        return false;
      }
      if (!this.verPhoneFiled()) {
        return false;
      }
      this.getCode();
      this.handleCMSPost();
    },
    async handleCMSPost() {
      const res = await sendSms({
        phone: this.tel
      });
      if (res.code === 200) {
        this.$toast("发送验证码成功");
      }
    },
    // 登录成功路由跳转：
    routerIndex() {
      this.$router.push({
        name: "recommend"
      });
    },
    ...mapActions(["saveLoginInfo"])
  },
  destroyed() {
    clearTimeout(this.timer);
  },
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Field.name]: Field,
    [Button.name]: Button,
    [NumberKeyboard.name]: NumberKeyboard,
    rotate3DCard
  }
};
</script>

<style lang="less" scoped>
.slideUp-enter-active,
.slideUp-leave-active {
  transition: all 0.5s;
}
.slideUp-enter, .slideUp-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translate3d(0, 100%, 0);
}
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 66;
  background-color: @mc;
  background-color: #222;
}
.font-wrap {
  padding-top: 50vh;
}
.back {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 50;
  .iconchuyidong {
    display: block;
    padding: 10px;
    font-size: @font-size-large-x;
    color: #fff;
    font-size: 36px;
  }
}
.login-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  .login-phone {
    width: 7.4rem;
    height: 1.1rem;
    line-height: 1.1rem;
    border-radius: 30px;
    background-color: #fff;
    color: #dd001b;

    letter-spacing: 1.5px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-weight: bold;
    span {
      .posc;
    }
  }
  .login-off {
    width: 7.4rem;
    height: 1.1rem;
    line-height: 1.1rem;
    border-radius: 30px;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1.5px;
    font-size: 16px;
    text-align: center;
    margin: 15px auto 0;
    position: relative;
    font-weight: bold;
    span {
      .posc;
    }
  }
}
/deep/.btntips {
  .van-checkbox {
    text-align: center;
    justify-content: center;
    margin-top: 34px;
  }
  .van-checkbox__label {
    .cf;
    font-size: 14px;
    span {
      opacity: 0.7;
    }
  }
}
.login-group {
  position: absolute;
  bottom: 10vh;
  right: 0;
  left: 0;
  width: 80%;
  margin: 0 auto;
  .flex-row-nowrap(center);
  .item {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: relative;
    background-color: #fff;
    border: 1px solid #222;
    margin-right: 18px;
    i {
      .posc;
      font-size: 28px;
      &.iconweixin1 {
        color: #66db7a;
      }
      &.iconqq {
        color: #458ff7;
        font-size: 22px;
      }
      &.iconweibo1 {
        color: #c22613;
      }
    }
  }
  .item-row {
    height: 1rem;
    width: 3.4933rem;
    background-color: #fff;
    border: 1px solid #222;
    .flex-row-nowrap(center);
    justify-content: center;
    border-radius: 0.6667rem;
    i {
      color: #000;
      position: relative;
      bottom: 2px;
      margin-right: 5px;
    }
    p {
      font-size: 12px;
      color: #000;
    }
  }
}
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.back-wrap {
  background-color: #222;
  padding-top: 10vh;
  height: 100%;
  /deep/.van-cell {
    background-color: #333;
    margin-bottom: 10px;

    .van-field__label {
      span {
        color: #fff;
      }
    }
    .van-field__value {
      border-left: 1px solid #666;
      padding-left: 20px;
    }
    .van-field__control {
      color: #fff;
    }
  }
  .van-cell:not(:last-child)::after {
    display: none;
  }
  .van-field__label {
    width: 62px;
  }
  /deep/.van-field__left-icon .van-icon {
    color: #fff;
  }
  .login_tit {
    font-size: 18px;
    .cf;
    margin-bottom: 0;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }
  .login-phone-btn {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 20px;
    height: 40px;
    background-color: @mc;
    line-height: 40px;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
  .login-phone-rest {
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 20px;
    height: 40px;
    background-color: #333;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 14px;
  }
}

.login-phone-yzm {
  font-size: 14px;
  .extend-click();
  margin-top: 14px;
  display: inline-block;
}
/deep/.van-key {
  color: #fff;
}
.van-number-keyboard {
  background-color: #444;
}
/deep/.van-key {
  background-color: #333;
}
/deep/.van-number-keyboard__header {
  color: #fff;
}
/deep/.van-number-keyboard__close {
  color: @mc;
  font-weight: bold;
}
/deep/.van-number-keyboard__title {
  font-size: 16px;
}
</style>